<style lang="less">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <h4>读卡器管理</h4>
        <Alert show-icon>
            此处用于读卡器管理。
        </Alert>
        <ButtonGroup>
            <Button type="success" @click="jumpPage(gateId,'GateCardAdd')">
                <Icon type="md-add-circle"/>
                添加
            </Button>
            <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                <Icon type="md-close-circle"/>
                删除
            </Button>
            <Button type="info" @click="backGoJump()">
                <Icon type="md-return-left"/>
                返回门区控制器
            </Button>
        </ButtonGroup>
        <Row>
            <Col span="">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                gateId:'',
                total: 0,
                current: 1,
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '读卡器名称',
                        key: 'Readername',
                        align: 'center',
                    },
                    {
                        title: '读卡器地址',
                        key: 'Address',
                        align: 'center',

                    },
                    {
                        title: '摄像头的IP',
                        key: 'Camip',
                        align: 'center',
                    },
                    {
                        title: '摄像头端口号',
                        key: 'Camport',
                        align: 'center',
                    },
                    {
                        title: '摄像头访问用户名',
                        key: 'Camuser',
                        align: 'center',
                    },
                    {
                        title: '摄像头密码',
                        key: 'Campwd',
                        align: 'center',
                    },
                    {
                        title: '进出类型',
                        key: 'Inouttype',
                        align: 'center',
                    },
                    {
                        title: '大屏LED的IP',
                        key: 'Bigledip',
                        align: 'center',
                    },
                    {
                        title: '大屏LED的端口',
                        key: 'Bigledport',
                        align: 'center',
                    },
                    // {
                    //     title: '大屏LED的端口',
                    //     key: 'Bigledport',
                    //     align: 'center',
                    // },
                    // {
                    //     title: '大屏LED的宽度',
                    //     key: 'Bigledwidth',
                    //     align: 'center',
                    // },
                    {
                        title: '小屏LED的IP',
                        key: 'Smallledip',
                        align: 'center',
                    },
                    {
                        title: '小屏LED的端口',
                        key: 'Smallledport',
                        align: 'center',
                    },
                    // {
                    //     title: '小屏LED的宽度',
                    //     key: 'Smallledwidth',
                    //     align: 'center',
                    // },
                    // {
                    //     title: '小屏LED的高度',
                    //     key: 'Smalledheight',
                    //     align: 'center',
                    // },
                    {
                        title: '值班室LED的IP',
                        key: 'Zbledip',
                        align: 'center',
                    },
                    {
                        title: '值班室LED的端口',
                        key: 'Zbledport',
                        align: 'center',
                    },
                    // {
                    //     title: '值班室LED的宽度',
                    //     key: 'Zbledwidth',
                    //     align: 'center',
                    // },
                    // {
                    //     title: '值班室LED的高度',
                    //     key: 'Zbledheight',
                    //     align: 'center',
                    // },
                    {
                        title: '面部识别设备IP',
                        key: 'Facedeviceip',
                        align: 'center',
                    },
                    {
                        title: '备注说明',
                        key: 'comment',
                        align: 'center',
                    },
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.gateId = this.$route.query.id
        },
        methods: {
            //backJump
            backGoJump:function(){
                this.$router.back(-1)

            },
            //跳转
            jumpPage: function (id, url) {
                let route = '';

                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                        },
                    };
                } else {

                    route = {
                        path: url,

                    };
                }


                this.$router.push(route);
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的读卡器项，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.DelGateReader, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },
            mockTableData() {
                let that = this;

                let para = {
                    ctrlid: that.$route.query.id,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that,apiUtil.urls.GateReaderList, para, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;
                    console.log('tableData:', res)
                });

            },

        },
    }
</script>
